<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="dragable" style=" position:absolute; width: 100px; height: 100px; border: solid 1px green;"></div>


  <script>
    function enableDrag(element) {
      let x0, y0;
      element.addEventListener("mousedown", e => {
        [x0, y0] = [e.clientX, e.clientY]
      })
      element.addEventListener("mousemove", e => {
        let [dx, dy] = [e.clientX - x0, e.clientY - y0]
        element.style.top = dy + "px"
        element.style.left = dx + 'px'
      })
    }
    enableDrag(document.getElementById('dragable'))
  </script>
</body>

</html>